<template>
    <div class="home-index" id="homeIndex">
        <div class="home-header">
            <div class="home-index-search" @click="router('/article_serach')">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="搜索">
            </div>
        </div>
        <!-- 幻灯区 -->
        <van-swipe :autoplay="3000" indicator-color="white" style="height:3rem">
            <van-swipe-item v-for="(item, index) of banner" :key="index" ><img @click="router('/article_details?id='+item.monasteryid)" :src="item.showpicture" alt=""><span></span><i>{{ item.monasteryname }}</i></van-swipe-item>
        </van-swipe>
        <!-- 幻灯区end -->

        <div class="home-item-list">
            <div class="item-list" @click="router('/article_details?id='+item.monasteryid)" v-for="(item, index) of list" :key="index">
                <img :src="item.showpicture" alt="">
                <div class="item-list-cont">
                   
                    <h2>{{ item.monasteryname }} </h2>
                    <p :title="item.introduction">
                        {{ item.introduction }}
                    </p>
                </div>
            </div>


            <div class="loding" v-if="loading">
                <img src="http://tmpfile.nbyh.mejimeji.net/loding1.gif" alt="">
            </div>
            
        </div>

        
    </div>
</template>

<script>
import {getResponse, getResponses} from "../api"
export default {
    data() {
        return {
            lock:false,
            banner:[],
            list:[],
            pagenum:1,
            pagesize:10,
            total:0,
            loading:false
        }
    },

    methods:{
        router(url) {
            this.$router.push(url)
        },

        //寺庙列表
        async getMusic(type) {
            const data = await getResponses(`/fochina/query/monasterylist/json`,{'querytype':2,'pagenum':this.pagenum,'pagesize':10})
            if(data.code === '0000') {
                this.list = this.list.concat(data.data)
                this.total = data.total
                this.loading = false
                this.lock  = false
            } else {
                console.log(data.error)
            }
        },

        async getBanner() {
            const data = await getResponses(`/fochina/query/monasterylist/json`,{'querytype':1,'pagenum':this.pagenum,'pagesize':10})
            if(data.code === '0000') {
                this.banner = data.data
            } else {
                console.log(data.error)
            }
        }
    },

    mounted() {

        let innerHeight = window.innerHeight

        window.addEventListener('scroll', (e)=>{
            console.log(11)
            if(window.scrollY + innerHeight + 500 > document.getElementById('homeIndex').offsetHeight && Math.ceil(this.total/this.pagesize) > this.pagenum) {
                if(this.lock) return;
                this.lock = true
                this.pagenum = this.pagenum +1
                this.loading = true
                this.getMusic()
            }
        })
    },

    created() {
        this.getMusic()
        this.getBanner()
    }
}
</script>
<style scoped>
.history_cont {
    display: flex;
    flex-wrap: wrap;
}

.history_item {
    min-width: 1.46rem;
    height: 0.46rem;
    background: #E9EAEC;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 0.28rem;
    color: #333;
    margin-right:0.16rem;
    margin-bottom:0.16rem;
}

.history_record {
    width: 7.5rem;
    background-color: #fff;
    min-height: 100vh;
    padding:0 0.3rem;
    box-sizing: border-box;
    
}

.history_record h2 {
    font-family: PingFangSC-Medium;
    font-size: 0.34rem;
    color: #333;
    justify-content: space-between;
    display: flex;
    text-align: center;
    width:100%;
    padding:0.26rem 0;
}

.home-header {
    height: 1rem;
    width:100%;
    background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
    display: flex;
    justify-content: center;
    align-items: center
}

.home-index-search {
    width:7rem;
    height: 0.6rem;
    background-color:#fff;
    position: relative;
    box-sizing: border-box;
}

.home-index-search i.icon-sousuo{
    position: absolute;
    left:0.28rem;
    top:50%;
    transform: translateY(-50%);
    color:#B2B2B2;
}


.home-index-search i.icon-guanbi {
    position: absolute;
    top:0.12rem;
    right:0.22rem;
    color:#B2B2B2;
}

.home-index-search input {
    border:none;
    width:7rem;
    height: 0.6rem;
    font-size:0.28rem;
    padding:0 0.68rem 0 0.68rem;
    box-sizing: border-box;
    color:#666
}


.item-list {
    width:100%;
    height: 2.3rem;
    border-top:1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
    display: flex;
    padding:0.25rem;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 0.2rem;
}

.item-list img {
    width:1.8rem;
    height: 1.8rem;
    border-radius: 10px;
    margin-right:0.34rem;
}

.item-list h2 {
    font-size:0.34rem;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.14rem;
}

.item-list h2 span {
    font-size: 0.24rem;
    color: #999;
}

.item-list p {
    font-size: 0.28rem;
    color: #666;
    line-height: 0.4rem;
}

.item-list-cont {
    flex:1
}

.item-list-cont p {
    width:100%;
    font-family: PingFangSC-Regular;
    font-size:0.28rem;
    color: #666666;
    text-align: justify;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height:1.2rem;
    overflow: hidden
}

.home-item-list {
    padding-bottom:1rem;
}
</style>

